<template>
  <section class="container">

    <mt-header title="首页" class="header">
      <router-link to="/" slot="left">
        <i class="iconfont" style="color: #ff790e">&#xe6b8;</i>
      </router-link>
      <router-link to="/settings" slot="right">
        <i class="iconfont" style="color: #999999">&#xe78b;</i>
      </router-link>
    </mt-header>

    <div class="content">

      <div class="entrance">
        <div class="entrance-item">
          <router-link class="entrance-link" to="/lease">
            <i class="iconfont">&#xe699;</i>
            <span>租约</span>
          </router-link>
        </div>
        <div class="entrance-item">
          <router-link class="entrance-link" to="/">
            <i class="iconfont">&#xe6ed;</i>
            <span>房租</span>
          </router-link>
        </div>
      </div>

      <div class="lease-wrap">
        <div class="lease-item">
          <div class="lease-header">
            <div class="lease-icon">
              <i class="iconfont">&#xe791;</i>
            </div>
            <div class="lease-title">
              <h3>租约</h3>
              <span>2017-12-14 12:00</span>
            </div>
          </div>
          <div class="lease-info">
            <h2>你有一份租约待确认</h2>
            <span>房源地址：上海市外滩SOHO G座18</span>
          </div>
          <router-link to="/login" tag="div" class="lease-link">去确认</router-link>
        </div>
      </div>

      <div class="lease-wrap">
        <div class="lease-item">
          <div class="lease-header">
            <div class="lease-icon">
              <i class="iconfont" style="color: rgba(255, 186, 0, .5)">&#xe6ed;</i>
            </div>
            <div class="lease-title">
              <h3>房租</h3>
              <span>2017-12-14 12:00</span>
            </div>
          </div>
          <div class="lease-info">
            <h2>你有一份账单需要支付</h2>
            <span>2017-12-12 前支付</span>
          </div>
          <router-link to="/" tag="div" class="lease-link">查看详情</router-link>
        </div>
      </div>

    </div>

  </section>
</template>

<script>

</script>

<style>
.entrance{
  padding: 0 1rem;
  background: #ffffff;
  display: flex;
  margin-top: .5rem;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
.entrance .entrance-item{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 6.8rem;
}
.entrance .entrance-item .entrance-link{
  text-align: center;
}
.entrance .entrance-item .entrance-link i{
  font-size: 2.2rem;
  color: rgba(27, 156, 255, 1)
}
.entrance .entrance-item:last-child .entrance-link i{
  color: rgba(255, 186, 0, 1)
}
.entrance .entrance-item .entrance-link span{
  display: block;
  font-size: .7rem;
  color: #333333;
  margin-top: .5rem;
}

.lease-wrap{
  margin-top: .5rem;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
.lease-item{
  background: #ffffff;
  padding-top: 1rem;
}
.lease-header{
  display: flex;
}
.lease-icon{
  display: flex;
  width: 2rem;
  justify-content: flex-end;
}
.lease-icon i{
  font-size: 1.5rem;
  color: rgba(203, 231, 255, 1);
}
.lease-title{
  padding-left: .3rem;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.lease-title h3{
  font-size: .7rem;
  color: #666666;
  font-weight: normal;
}
.lease-title span{
  font-size: .6rem;
  color: #999999;
  margin-top: .3rem;
}
.lease-info{
  padding-left: 2.3rem;
  box-sizing: border-box;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.lease-info h2{
  font-size: .8rem;
  color: #333333;
  font-weight: normal;
}
.lease-info span{
  display: block;
  font-size: .6rem;
  color: #999999;
  margin-top: .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: .5rem;
}
.lease-link{
  display: flex;
  height: 2rem;
  background: rgba(249, 249, 249, 1);
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  color: #999999;
}
</style>

